<template>
	<div class="customerInfo">
		<div class="pageW">
			<div class="top-box">
				<div class="card1-box">
					<card1 ref="card1" :info="info" :userInfo="info.user_info"></card1>
				</div>
				<div class="card-list-wrap">
					<div class="card2-list">
						<card2 :info="info" :userInfo="info.user_info" v-for="(item, index) in deviceList" :key="index" :item="item"></card2>
					</div>
					<h4>检测报告</h4>
					<div class="card3-list">
						<card3 v-for="(item, index) in deviceList" :key="index" :item="item"></card3>
					</div>
				</div>
			</div>
			<div class="footer-active">
				<el-button :loading="wccp_load" @click="clickBtns({ flag: '检测完成' })" class="footer-active-button-2">
					<img src="@img/wc.png" alt="" />
					检测完成
				</el-button>
			</div>
			<section>
				<div class="section-title">
					<div class="lbox">
						<h4>综合评估报告</h4>
					</div>
					<div class="rbox">
						<el-button :loading="pg_load" class="rbox-button" icon="el-icon-edit" @click="clickBtns({ flag: '编辑评估' })">编辑评估</el-button>
					</div>
				</div>
				<div class="card4">
					<template v-if="checkInfo.check_pdf_url">
						<div class="icon">
							<img src="@img/Pdf.png" alt="" />
						</div>
						<div class="text" @click="clickOpenUrl(checkInfo.check_pdf_url)">{{ getFileName(checkInfo.check_pdf_url) }}</div>
					</template>
				</div>
			</section>

			<section>
				<h4>补充材料</h4>

				<div class="card5">
					<div class="code-wrap" v-if="isShowCode">
						<!-- <div class="code-wrap"> -->
						<div class="code-box">
							<div class="text">扫描二维码手机上传照片及视频资料</div>
							<div class="code">
								<vue-qr :text="qrCodeUrl" :size="300"></vue-qr>
							</div>
						</div>

						<el-button :loading="scwc_load" @click="clickBtns({ flag: '上传完成' })" class="scwc-button">
							<img src="@img/wc.png" alt="" />
							上传完成
						</el-button>
					</div>
					<div class="video-wrap" v-else>
						<!-- <div class="video-wrap" > -->
						<div class="card5-title">照片资料</div>
						<videoList :list="imgArr" type="image"></videoList>
						<div class="card5-title">视频资料</div>
						<videoList :list="videoArr"></videoList>
					</div>

					<div class="code-wrap" v-if="!isShowCode">
						<!-- <div class="code-wrap"> -->
						<div class="code-box">
							<div class="text">扫描二维码手机编辑照片及视频资料</div>
							<div class="code">
								<vue-qr key="edit" :text="qrCodeUrl" :size="300"></vue-qr>
							</div>
						</div>
					</div>
				</div>
			</section>
			<div class="footer-active">
				<el-button :loading="scbg_load" @click="clickBtns({ flag: '生成报告' })" class="footer-active-button-1">
					<img src="@img/xz.png" alt="" />
					生成报告
				</el-button>
			</div>
		</div>

		<pagePop :info="info" @handleClose-pop="fun" ref="pagePop" />
		<loginPagePop></loginPagePop>
		<pagePopView ref="pagePopView"></pagePopView>
	</div>
</template>

<script>
import card1 from '@/components/common/card1';
import card2 from '@/components/common/card2';
import card3 from '@/components/common/card3';
import videoList from '@/components/common/videoList';
import pagePop from '@/components/common/pagePop';
import VueQr from 'vue-qr';
import pagePopView from '@/components/common/pagePopView';
import loginPagePop from '@/components/common/loginPagePop.vue'; //顶部搜索
export default {
	name: 'customerInfo',
	components: { card1, card2, card3, videoList, pagePop, VueQr, loginPagePop, pagePopView },
	data() {
		return {
			// device_type 设备类型 1-足部扫描仪 2-全足扫描仪 3-进口压力板
			card2List: [
				{ id: 1, icon: require('@img/01.png'), name: '足底扫描仪', desc: '高精度足底三维扫描，精确获取足底形态数据' },
				{ id: 2, icon: require('@img/02.png'), name: '全足扫描仪', desc: '360°全方位扫描，构建完整足部三维模型' },
				{ id: 3, icon: require('@img/03.png'), name: '进口压力板', desc: '实时足底压力分布分析，评估行走姿态' }
			],
			isShowCode: true,
			scwc_load: false,
			wccp_load: false,
			scbg_load: false,
			pg_load: false,
			info: { user_info: {}, op_user_info: {}, shop_info: {} },
			deviceList: [],
			checkInfo: {},
			imgArr: [],
			videoArr: []
		};
	},
	computed: {
		qrCodeUrl() {
			let host = 'http://check.yo-bu.com';
			if (process.env.NODE_ENV == 'production') host = location.origin;
			let url = `${host}/h5?user_id=${this.$route.query.user_id}&check_id=${this.$route.query.check_id}`;
			return url;
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		fun(){
			console.log(222222222222);
		},
		clickOpenUrl(url) {
			this.$refs.pagePopView.init({ url });
		},
		clickBtns({ flag }) {
			if (flag === '生成报告') {
				let params = {
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					status: 2
				};
				this.scbg_load = false;
				this.$api('check/report/create', params, 'post').then((res) => {
					this.scbg_load = false;
					if (res.code == 200) {
						this.toRep('/');
						this.getCheckDetail();
					}
				});
				return;
			}
			if (flag === '检测完成') {
				let params = {
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					status: 1
				};
				this.wccp_load = true;
				this.$api('check/report/create', params, 'post').then((res) => {
					this.wccp_load = false;
					if (res.code == 200) {
						this.toRep('/');
						this.getCheckDetail();
					}
				});

				// this.$api('check/report/create', { user_id: this.$route.query.user_id, check_id: this.$route.query.check_id }, 'post').then((res) => {
				// 	this.wccp_load = false;
				// 	if (res.code == 200) {
				// 		this.toNav('/')
				// 	} else {
				// 		alert(res);
				// 	}
				// });
				return;
			}
			if (flag === '编辑评估') {
				this.pg_load = true;
				this.$refs.card1.customUpdate(() => {
					this.pg_load = false;
					this.toNav(`infoForm?user_id=${this.$route.query.user_id}&check_id=${this.$route.query.check_id}`);
				});
				return;
			}
			if (flag === '上传完成') {
				this.scwc_load = true;
				this.$api('check/user_photo_video/status', { check_id: this.$route.query.check_id }, 'post').then((res) => {
					this.scwc_load = false;
					if (res.code == 200) {
						let status = Number(res.data.data.status);
						if (status === 0) {
							alertSucc(res.data.data.msg);
							this.getVideoAndImg();
						} else {
							alertErr(res.data.data.msg);
						}
					}
				});
				return;
			}
		},

		getVideoAndImg() {
			this.$api('check/user_photo_video/info', { check_id: this.$route.query.check_id }, 'post').then((res) => {
				if (res.code == 200) {
					let data = res.data;
					// console.log({ ...data });
					let imgArr = [];
					let videoArr = [];
					for (const key in data) {
						let value = data[key];
						if (value !== null && typeof value === 'object') {
							// 判断是否有值
							if (value.name && value.url && value.type) {
								// console.log({ ...value }, '-----------value');
								if (value.type == 'img') {
									imgArr.push(value);
								} else if (value.type == 'video') {
									videoArr.push(value);
								}
							}
						}
					}
					this.imgArr = imgArr;
					this.videoArr = videoArr;

					if (this.imgArr.length && this.videoArr.length) {
						this.isShowCode = false;
					} else {
						this.isShowCode = true;
					}
					// console.log({ imgArr, videoArr }, '---------------imgArr--videoArr');
				}
			});
		},
		async init() {
			this.getVideoAndImg();
			this.$api('check/user/detail', { user_id: this.$route.query.user_id }, 'post').then((res) => {
				if (res.code == 200) {
					this.info = res.data.data;
					sessionStorage.setItem('checkUser', JSON.stringify(this.info));
				}
			});
			this.getCheckDetail();
			let shop_id = localStorage.getItem('shop_id');
			this.$api('check/device/list', { shop_id }, 'post').then((res) => {
				if (res.code == 200) {
					this.deviceList = res.data.data.map((v) => {
						let item = this.card2List.find((item) => item.id == v.device_type);
						return {
							icon: item?.icon,
							...v
						};
					});

					this.getReportInfo();
				}
			});
		},

		getCheckDetail() {
			this.$api('check/check_detail/detail', { check_id: this.$route.query.check_id }, 'post').then((res) => {
				if (res.code == 200) {
					this.checkInfo = res.data.data;
					let form = this.$refs.card1.form;
					let user_requirement = this.checkInfo.user_requirement.split(',').map((v) => Number(v));
					this.$set(form, 'user_requirement', user_requirement);
					this.$set(form, 'user_requirement_remark', this.checkInfo.user_requirement_remark);
				}
			});
		},
		getReportInfo() {
			let device_id = this.deviceList.map((v) => v.id);
			this.$api('check/device_report/info', { check_id: this.$route.query.check_id, device_id }, 'post').then((res) => {
				if (res.code == 200) {
					let data = res.data.data;
					if (Object.keys(data).length) {
						this.deviceList.forEach((item) => {
							let id = item.id;
							if (data[id]) {
								this.$set(item, 'baogaoInfo', data[id]);
								this.$set(item, 'pdf_urls', data[id].pdf_urls || []);
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.customerInfo {
	width: 100%;
	min-height: 100vh;
	background: url('../../assets/img/index-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.pageW {
		width: @width;
		margin: auto;
		padding: 25px 0;
		.top-box {
			display: flex;
			// justify-content: space-between;

			.card-list-wrap {
				margin-left: 23px;
				width: calc(@width - 23px - 481px);
				overflow-x: auto;
				.card2-list {
					display: flex;
					gap: 23px;
				}
				.card3-list {
					display: flex;
					gap: 23px;
				}
			}
		}
		h4 {
			padding: 26px 0 20px;
			font-weight: bold;
			font-size: 20px;
			color: #ffffff;
			line-height: 28px;
			text-align: left;
			font-style: normal;
		}

		.section-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.lbox {
			}
			.rbox {
				.rbox-button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 108px;
					height: 37px;
					background: #ffffff;
					border-radius: 10px;
					font-weight: bold;
					font-size: 14px;
					color: #fc5f10;
					font-style: normal;
				}
			}
		}
		.card4 {
			height: 72px;
			background: #ffffff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			padding: 0 25px;
			.icon {
				width: 12px;
				height: 13px;
				margin-right: 10px;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				text-align: left;
				font-style: normal;
				cursor: pointer;
			}
		}

		.card5 {
			min-height: 374px;
			background: #ffffff;
			border-radius: 10px;
			padding: 20px 25px 30px;
			.code-wrap {
				display: flex;
				align-items: center;
				justify-content: center;
				.code-box {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.scwc-button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160px;
					height: 54px;
					margin-left: 100px;
					background: #fc5f10;
					border-radius: 10px;
					// border: 1px solid #ffffff;
					font-weight: bold;
					font-size: 16px;
					color: #ffffff;
					/deep/span {
						display: flex;
						align-items: center;
					}
					img {
						display: block;
						margin-right: 10px;
					}
				}
			}
			.video-wrap {
			}
			.card5-title {
				padding: 17px 0;
				font-weight: bold;
				font-size: 18px;
				color: #333333;
				text-align: left;
				font-style: normal;
			}
			.text {
				padding-bottom: 25px;
				font-weight: bold;
				font-size: 18px;
				color: #333333;
				line-height: 25px;
				text-align: left;
				font-style: normal;
			}
			.code {
				width: 252px;
				height: 252px;
				border: 1px solid #979797;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.footer-active {
			padding: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			.footer-active-button-1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: #049669;
				border-radius: 10px;
				border: 1px solid #ffffff;

				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				/deep/span {
					display: flex;
					align-items: center;
				}
				img {
					// vertical-align: middle;
					display: block;
					margin-right: 10px;
					width: 16px;
					height: 16px;
					
				}
			}
			.footer-active-button-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160px;
				height: 54px;
				background: @theme;
				border-radius: 10px;
				border: 1px solid #ffffff;

				font-weight: bold;
				font-size: 16px;
				color: #ffffff;
				font-style: normal;
				/deep/span {
					display: flex;
					align-items: center;
				}
				img {
					// vertical-align: middle;
					display: block;
					margin-right: 10px;
					width: 16px;
					height: 16px;
				}
			}
		}
	}
}
</style>
